<template>
	<view class="progressBox font13">
        <view class="progressTitle font15 fontBold">楼盘时间轴</view>
        
        <view class="top-10 flex" :id="id">
            <scroll-view :scroll-x="true" class="stageScroll" id="scrollId" :scroll-left="scrollLeft">
                <view class="stageBox col-3e">
                    <block v-for="(item,index) in stages" :key="item.type">
                        <view class="item" :id="'tab-item-' + index" :class="index == saleIndex?'active':index<saleIndex?'beforeSty':''">
                            <view class="cont flex">
                                <view>{{item.name}}</view>
                                <text class="font10 date-sm">{{item.time}}</text>
                            </view>
                            <view class="icon-ing bg-error col-fff text-center font8" v-if="index == saleIndex && saleIndex !== 0 && saleIndex !== stages.length-1">进行中</view>
                        </view>
                    </block>
                </view>
            </scroll-view>
        </view>
        
        <block v-for="(item, index) in stages" :key="index">
            <block v-if="item.status == 'ongoing'">
                <view class="progressDate top-20">
                    {{item.time}}
                    <view class="font13 top-10 col-grey">该项目于{{item.time}}开始{{item.name}}</view>
                </view>
            </block>
        </block>
	</view>
</template>

<script>
    import { isDuringDate } from '@/common/common';
	export default {
        data() {
            return {
                id: this.$u.guid(), // id值
                saleIndex: 0,
                stages: [],
                tabQueryInfo: {},
                scrollLeft: 0
            }
        },

        props: {
            detail: {
                type: Object,
                default: () => {}
            }
        },
        
        watch: {
            detail: {
                handler(val) {
                    this.setTimeLinde()
                },
                deep: true
            }
        },
       
        methods:{
            async setTimeLinde(){
                let saleIndex = 0;
                let { sell_type, zheng_time, buy_start_time, buy_end_time, yao_time } = this.detail;
                //上海
                let arr = [{
                    name: '待售',
                    type: 'daishou',
                    time: '',
                    status: '',
                    desc: `样板房已开放，火热预约中`,
                    citys: ['310100','320500']
                },{
                    name: '取证',
                    type: 'zheng_time',
                    time: zheng_time?zheng_time:'',
                    status: zheng_time?isDuringDate(zheng_time,zheng_time) : '',
                    desc: `该项目已取证，${zheng_time?'取证时间'+zheng_time:''} 火热预约中`,
                    citys: ['310100', '320100', '320500']
                },{
                    name: '认购',
                    type: 'buy_start_time',
                    time: buy_start_time&&buy_end_time?`${buy_start_time.substr(5, 11)}至${buy_end_time.substr(5, 11)}`:'',
                    status: buy_start_time&&buy_end_time?isDuringDate(buy_start_time,buy_end_time) : '',
                    desc: `该项目已认购，火热预约中`,
                    citys: ['310100', '320500']
                },{
                    name: '等待摇号',
                    type: 'dai_yao',
                    time: '',
                    status: '',
                    desc: `该项目已等待摇号，火热预约中`,
                    citys: ['310100', '330100', '320500']
                },{
                    name: '摇号开盘',
                    type: 'yao_time',
                    time: yao_time?yao_time:'',
                    status: yao_time?isDuringDate(yao_time,yao_time):'',
                    desc: `该项目已摇号，${yao_time?'摇号时间'+yao_time:''}火热预约中`,
                    citys: ['310100', '330100', '320500']
                },{
                    name: '持续销售',
                    type: 'chixu',
                    time: '',
                    status: '',
                    desc: `该项目将持续销售，请继续关注`,
                    citys: ['310100', '330100', '320500']
                },{
                    name: '售罄',
                    type: 'sale_end_time',
                    time: '',
                    status: '',
                    desc: `该项目已售罄`,
                    citys: ['310100', '330100', '320500']
                }];
                
                
                //上海
                let onGoingIdx = this.arrLastIndex(arr, 'ongoing')?this.arrLastIndex(arr, 'ongoing'):-1;//最后一个进行中下标
                let endIdx = this.arrLastIndex(arr, 'end')?this.arrLastIndex(arr, 'end'):-1;//最后一个结束下标
                
                //判断是否已售罄
                if(sell_type === 'end') {
                    saleIndex = arr.length - 1;
                }else if(sell_type === 'sale'){
                    saleIndex = arr.length - 2;
                }else {
                    //存在进行中
                    if(onGoingIdx>0){
                        saleIndex=onGoingIdx;
                    }else if(endIdx>0) {
                        //认购结束时状态为等待摇号
                        if(arr[endIdx].type === 'buy_start_time') {
                            endIdx+=1
                        }else if(arr[endIdx].type === 'yao_time') {
                            //开盘结束时状态为持续销售
                            endIdx+=1
                        }
                        saleIndex = endIdx
                    }
                }
                
                this.stages = arr;
                this.saleIndex = saleIndex;
                this.getTabRect();
            },
            
            // 查询tab的布局信息
            getTabRect() {
                const that = this;
            	// 创建节点查询
            	let query = uni.createSelectorQuery().in(this);
                query.select('#scrollId').fields({
                    id: true,
                    dataset: true,
                    size: true,
                    scrollOffset: true,
                    properties: ['scrollX', 'scrollY'],
                    context: true
                },function (res){
                    if(that.saleIndex >= 3) {
                        that.$nextTick(() => {
                            that.scrollLeft = (res.scrollWidth / 2)+100
                        });
                    }
                }).exec();
            },
            
            //判断某个状态最后出现的位置
            arrLastIndex(arr, type){
                for(let i=arr.length-1; i>= 0; i--) {
                    if(arr[i].status === type) {
                        return i
                    }
                }
            }
        }
	}
</script>

<style lang="scss" scoped>
	.progressBox{
        margin: 50rpx 22rpx 0 22rpx;
        border-bottom: 2rpx solid rgba(0,0,0,.06);
	    .stageScroll{
	        height: 104rpx;
	        .stageBox{
	            white-space: nowrap;
	            margin-top: 18rpx;
	        }
	    }
	    .item{
	        vertical-align: top;
	        display: inline-block;
	        height: 84rpx;
	        margin: 0rpx 8rpx;
	        padding-left: 30rpx;
	        position: relative;
	        background-color: #E7E7E7;
	        &::before{
	            content: "";
	            display: block;
	            border-top: 42rpx solid #E7E7E7;
	            border-bottom: 42rpx solid #E7E7E7;
	            border-left: 20rpx solid #FFFFFF;
	            position: absolute;
	            left: 0rpx;
	            top: 0;
	            z-index: 9;
	        }
	        &::after{
	            content: '';
	            display: block;
	            border-top: 42rpx solid transparent;
	            border-bottom: 42rpx solid transparent;
	            border-left: 20rpx solid #E7E7E7;
	            position: absolute;
	            right: -20rpx;
	            top: 0;
	            z-index: 10;
	        }
	        &:first-child{
	            margin-left: 0;
	        }
	        &:last-child{
	            margin-right: 0;
	        }
	        .cont{
	            padding: 0rpx 15rpx;
	            height: 100%;
	            flex-direction: column;
	            align-items: flex-start;
	        }
	        .icon-ing{
	            position: absolute;
	            z-index: 11;
	            top: -12rpx;
	            right: -30rpx;
	            border: 2rpx solid #FFFFFF;
	            border-top-left-radius: 20rpx;
	            border-top-right-radius: 20rpx;
	            border-bottom-right-radius: 20rpx;
	            box-shadow: 4rpx 4rpx 6rpx rgba(0,0,0,.5);
	            padding: 6rpx 16rpx;
	        }
	        .date-sm{
	            margin-top: 6rpx;
	        }
	    }
	    .beforeSty{
	        background-color: #E5F0EF;
	        &::before{
	            border-top: 42rpx solid #E5F0EF;
	            border-bottom: 42rpx solid #E5F0EF;
	        }
	        &::after{
	            border-left: 20rpx solid #E5F0EF;
	        }
	    }
	    .active{
	        background-color: $theme-color;
	        color: #FFFFFF;
	        &::before{
	            border-top: 42rpx solid $theme-color;
	            border-bottom: 42rpx solid $theme-color;
	        }
	        &::after{
	            border-left: 20rpx solid $theme-color;
	        }
	    }
	    .progressDate{
	        position: relative;
	        padding-left: 22rpx;
	        border-left: 1rpx solid rgba(0,0,0,.04);
	        &::before{
	            content: "";
	            position: absolute;
	            left: -8rpx;
	            top: 0;
	            width: 15rpx;
	            height: 15rpx;
	            background-color: $theme-color;
	            border-radius: 50%;
	        }
	    }
	}
</style>
